<template>
	<block v-if="type === 'card'">
		<view class="radio-card-wrapper">
			<block v-for="(item, index) in list" :key="index">
				<view class="radio-item" :class="{ 'radio-item-active': value === item.value }" @tap="onClick(index)">
					{{ item.label }}
				</view>
			</block>
		</view>
	</block>
	<block v-else>
		<view class="radio-wrapper">
			<block v-for="(item, index) in list" :key="index">
				<view class="radio-item" @tap="onClick(index)">
					<view class="radio-icon">
						<view
							class="radio"
							:style="{
								borderColor: value === item.value ? activeColor : 'unset'
							}"
						>
							<u-icon :color="activeColor" v-if="value === item.value" name="checkbox-mark" size="32rpx" bold></u-icon>
						</view>
					</view>
					<view
						class="radio-label"
						:style="{
							color: value === item.value ? activeColor : 'unset'
						}"
					>
						{{ item.label }}
					</view>
				</view>
			</block>
		</view>
	</block>
</template>

<script>
export default {
	computed: {
		activeColor() {
			if (this.value !== undefined) {
				const item = this.list.find((e) => e.value === this.value);
				return item.color || '#0052d9';
			} else return '#0052d9';
		}
	},
	props: {
		type: {
			type: String,
			default: 'default'
		},
		value: {
			type: [Number, String],
			default: '',
			required: true
		},
		list: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		onClick(index) {
			const { value } = this.list[index];
			if (this.value === value) {
				return;
			}
			this.$emit('update:value', value);
			this.$emit('change', value);
		}
	}
};
</script>

<style lang="scss" scoped>
.radio-wrapper {
	display: flex;
	line-height: 56rpx;

	.radio-item {
		color: #767676;
		margin-right: 20rpx;
		transition: all 0.3s;
		display: flex;
		align-items: center;

		&:last-child {
			margin-right: 0;
		}

		.radio-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
	}

	.radio {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 2rpx solid $u-tips-color;
	}
}
.radio-card-wrapper {
	display: flex;
	gap: 32rpx;

	.radio-item {
		border-radius: 8rpx;
		padding: 8rpx 24rpx;
		background-color: $u-bg-color;
		transition: all 0.3s;
		display: flex;
		align-items: center;
		border: 2rpx solid transparent;

		&-active {
			border-color: $u-primary;
			color: $u-primary;
		}
	}
}
</style>
